<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>04_商品列表练习</title>
</head>
<body>
<table border="1">
    <tr>
        <th>商品名称</th>
        <th>商品价格</th>
        <th>商品库存</th>
    </tr>
</table>
<script>
    //定义数组用来模拟后端服务器请求回来的数据
    const arr=[
        {title:"红米手机",price:1999,num:100},
        {title:"OPPO手机",price:2999,num:200},
        {title:"一加手机",price:3999,num:300},
        {title:"威图手机",price:2479999,num:100}
    ];
    //获取用来展示数据的table元素
    let tableE=document.querySelector('table');
    //遍历商品数组
    for(let i=0;i<arr.length;i++){
        //每多一行，就需要创建一个tr与3个td元素
        let trE=document.createElement('tr');
        let titleE=document.createElement('td');
        let priceE=document.createElement('td');
        let numE=document.createElement('td');
        //将本轮循环到的商品数据放入到td元素中
        titleE.innerHTML=arr[i].title;
        priceE.innerHTML=arr[i].price;
        numE.innerHTML=arr[i].num;
        //将准备好的3个td元素添加到tr中
        trE.append(titleE,priceE,numE);
        //获取表格元素，并将准备好的tr元素添加到表格中
        tableE.append(trE);
    }
</script>
</body>
</html>